<template>
    <div>
        <!--问答页面-->
        <el-form label-width="80px">
            <div v-for="(item,index) in questionList" :key="index">
                <p class="question_radio_class">
                    <i class="el-icon-check" v-if="item.result == 1"/>
                    <i class="el-icon-close" v-if="item.result == 2" style="color :red"/>
                    <span v-if="item.questionType == 0">(单选)</span>
                    <span v-else-if="item.questionType==1">(多选)</span>
                    <span v-else-if="item.questionType==4">(简答)</span>
                    {{++index}}、{{item.question}}
                </p>
                <el-form-item v-if="item.questionType == 0">
                    <el-radio-group v-model="item.userAnswer" class="question_radio_class" >
                        <el-radio label="A" :disabled="finishedExamStatus==1">
                            <span class="select_line">{{item.selectA}}</span>
                        </el-radio>
                        <br/>
                        <el-radio label="B" :disabled="finishedExamStatus==1">
                            <span class="select_line">{{item.selectB}}</span>
                        </el-radio>
                        <br/>
                        <el-radio label="C" :disabled="finishedExamStatus==1">
                            <span class="select_line">{{item.selectC}}</span>
                        </el-radio>
                        <br/>
                        <el-radio label="D" :disabled="finishedExamStatus==1">
                            <span class="select_line">{{item.selectD}}</span>
                        </el-radio>
                        <br/>
                        <el-radio v-show="item.selectE!=null && item.selectE!='' " label="E"
                                  :disabled="finishedExamStatus==1">
                            <span class="select_line">{{item.selectE}}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="item.questionType == 1">
                    <el-checkbox-group v-model="item.userAnswer" class="question_radio_class">
                        <el-checkbox label="A" name="c_select" :disabled="finishedExamStatus==1">
                            <span class="select_line"> {{item.selectA}}</span>
                        </el-checkbox>
                        <br/>
                        <el-checkbox label="B" name="c_select" :disabled="finishedExamStatus==1">
                            <span class="select_line"> {{item.selectB}}</span>
                        </el-checkbox>
                        <br/>
                        <el-checkbox label="C" name="c_select" :disabled="finishedExamStatus==1">
                           <span class="select_line"> {{item.selectC}}</span>
                        </el-checkbox>
                        <br/>
                        <el-checkbox label="D" name="c_select" :disabled="finishedExamStatus==1">
                           <span class="select_line"> {{item.selectD}}</span>
                        </el-checkbox>
                        <br/>
                        <el-checkbox label="E" v-show="item.selectE!=null && item.selectE!='' " name="c_select"
                                     :disabled="finishedExamStatus==1">
                           <span class="select_line"> {{item.selectE}}</span>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item v-if="item.questionType == 4">
                    <el-input type="textarea" placeholder="请输入内容" v-model="item.userAnswer" maxlength="500" show-word-limit></el-input>
                </el-form-item>
                <el-form-item v-if="finishedExamStatus==1" label="答案">{{item.answer}}</el-form-item>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">关 闭</el-button>
            <el-button type="primary" v-if="finishedExamStatus != 1" @click="submitCheckBtnVisible=true">提 交</el-button>
        </span>

        <!--确认交卷-->
        <el-dialog title="确认交卷" :visible.sync="submitCheckBtnVisible" width="20%" >
            <span slot="footer" class="dialog-footer">
              <el-button @click="submitCheckBtnVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitQuestionResult()">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        props: {
            finishedExamStatus: {
                type: Number,
                default: () => 0,
            },
            questionList: {
                type: Array,
                default: () => [],
            },
            // submitCheckBtnVisible: {
            //     type: Boolean,
            //     default: () => false,
            // }
        },
        created() {
        },
        data() {
            return {
                submitCheckBtnVisible: false,
                //getCourseQuestionListUrl: '/mobilesPost/getCourseQuestionList',
                submitCourseQuestionUrl: '/mobilesPost/submitCourseQuestion',
                userInfo: JSON.parse(localStorage.getItem("userInfo")),
            }
        },
        methods: {
            /**
             * 答案提交
             * */
            submitQuestionResult() {
                var that = this;
                that.submitCheckBtnVisible = false;
                //提交问答
                console.log(this.questionList);

                this.$https.post(that.submitCourseQuestionUrl, {
                    resultList: that.questionList,
                    user_id: that.userInfo.userId,
                    associatedId: that.questionList[0].associatedId,
                    pageType :that.questionList[0].pageType
                }).then(res => {
                    that.questionVisible = false;
                    that.finishedExamStatus = res.data.data;
                    // that.handleClose1();
                    that.$message({
                        showClose: true,
                        message: '已答题，可点击原按钮查看答题详情/答案',
                        type: 'success'
                    });
                })

            },
            // handleCloseThis(){
            //
            // },
            //评论关闭
            handleClose() {
                this.$emit("handleClose");
                // this.$confirm('确认关闭？')
                //     .then(() => {
                //         done();
                //     })
                //     .catch(() => {
                //     });
            },
            handleClose1() {
                this.$emit("listParentClose");
                this.$emit("detailParentClose");
                // this.$confirm('确认关闭？')
                //     .then(() => {
                //         done();
                //     })
                //     .catch(() => {
                //     });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .question_radio_class {
        line-height: 30px;
        .select_line{
            white-space: normal;
            word-break: break-all;
        }
    }
</style>
